<!DOCTYPE html>
<html lang="ZH-cn">

<head>
    <meta charset="UTF-8" />
    <title>Test</title>
    <meta name="viewport" content="width=device-width,viewport-fit=cover,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

    <link rel="stylesheet" href="./styles/default.css">
    <style>
        s-page {
            padding: 24px;
            overflow: auto;
            box-sizing: border-box;
            color-scheme: light;
        }

        s-page > * {
            margin: 8px;
        }

        hr {
            margin: 0;
            border: none;
            height: 1px;
            background: var(--s-color-outline-variant);
            margin: 16px 0;
        }
    </style>
</head>

<body>
<s-page>
    <a href="./in-vue.html">In Vue</a>
    <a href="./test.html">Test</a>

    <div style="background: #009688; height: env(safe-area-inset-bottom);overflow: hidden;">safe-area-inset-bottom</div>

    <s-field allowFloat="true" label-float="true">
        <div slot="label">卧槽ABC</div>
        <div slot="view">测试内容</div>
    </s-field>

    <s-field allowFloat="true" label-float="false">
        <div slot="label">卧槽ABC</div>
        <!--<div slot="view">测试内容</div>-->
    </s-field>

    <s-field style="height: auto;" labelFloat="false">
        <div slot="label">卧槽</div>
        <input type="text" slot="view" style="background: rgba(0,0,0,.02);border: none;outline: none;height: 40px;">
    </s-field>

    <s-field style="height: auto;" labelFloat="true">
        <div slot="label">卧槽</div>
        <input type="text" slot="view" style="background: rgba(0,0,0,.02);border: none;outline: none;height: 40px;">
    </s-field>

    <s-field labelFloat="false">
        <div slot="label">卧槽</div>
        <div slot="view">文本</div>
    </s-field>

    <hr>
    <s-field-text label="请输入名称">
        <svg slot="start" style="width: 22px;height: 22px;" stroke="currentColor" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
            <circle cx="20" cy="20" r="14" fill="none" stroke="currentColor" stroke-width="4" />
            <path d="M32 32 L40 40" stroke="currentColor" stroke-width="4" stroke-linecap="round" />
        </svg>
        <svg slot="end" style="width: 22px;height: 22px;" stroke="currentColor" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
            <circle cx="20" cy="20" r="14" fill="none" stroke="currentColor" stroke-width="4" />
            <path d="M32 32 L40 40" stroke="currentColor" stroke-width="4" stroke-linecap="round" />
        </svg>
    </s-field-text>

    <s-field-text label="请输入名称" style="margin: 16px;">
        <s-icon-button slot="start">
            <s-icon type="star"></s-icon>
        </s-icon-button>
        <s-icon-button slot="end">
            <s-icon type="star"></s-icon>
        </s-icon-button>
    </s-field-text>

    <s-field-text label="请输入名称">
        <s-icon type="star" slot="start"></s-icon>
        <s-icon type="star" slot="end"></s-icon>
    </s-field-text>

    <s-field-text label="请输入名称" style="margin: 16px;--field-text-padding: 24px;--field-text-border-radius: 24px;">
        <s-icon type="star" slot="start"></s-icon>
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" slot="end">
            <path
                d="M240-160q-33 0-56.5-23.5T160-240q0-33 23.5-56.5T240-320q33 0 56.5 23.5T320-240q0 33-23.5 56.5T240-160Zm240 0q-33 0-56.5-23.5T400-240q0-33 23.5-56.5T480-320q33 0 56.5 23.5T560-240q0 33-23.5 56.5T480-160Zm240 0q-33 0-56.5-23.5T640-240q0-33 23.5-56.5T720-320q33 0 56.5 23.5T800-240q0 33-23.5 56.5T720-160ZM240-400q-33 0-56.5-23.5T160-480q0-33 23.5-56.5T240-560q33 0 56.5 23.5T320-480q0 33-23.5 56.5T240-400Zm240 0q-33 0-56.5-23.5T400-480q0-33 23.5-56.5T480-560q33 0 56.5 23.5T560-480q0 33-23.5 56.5T480-400Zm240 0q-33 0-56.5-23.5T640-480q0-33 23.5-56.5T720-560q33 0 56.5 23.5T800-480q0 33-23.5 56.5T720-400ZM240-640q-33 0-56.5-23.5T160-720q0-33 23.5-56.5T240-800q33 0 56.5 23.5T320-720q0 33-23.5 56.5T240-640Zm240 0q-33 0-56.5-23.5T400-720q0-33 23.5-56.5T480-800q33 0 56.5 23.5T560-720q0 33-23.5 56.5T480-640Zm240 0q-33 0-56.5-23.5T640-720q0-33 23.5-56.5T720-800q33 0 56.5 23.5T800-720q0 33-23.5 56.5T720-640Z">
            </path>
        </svg>
    </s-field-text>

    <s-field-text label="请输入密码" style="margin: 16px;" value="1123"
                  onchange="customElements.get('s-snackbar').show('change')"
                  oninput="customElements.get('s-snackbar').show(this.value)"
                  onfocus="customElements.get('s-snackbar').show('focus')"
                  onblur="customElements.get('s-snackbar').show('blur')">
    </s-field-text>

    <s-field-text label="请输入数字" style="margin: 16px;" type="number" value="1123">
    </s-field-text>

    <s-field-text label="请输入名称星" style="margin: 16px;--padding: 40px" oninput="console.log('input')"
                  onfocus="console.log('focus')" onblur="console.log('blur')"
                  onchange="console.log('change')">
        <div slot="text">输入错误</div>
    </s-field-text>

    <s-field-text label="请输入名称星" error="true" style="margin: 16px;" oninput="console.log('input')"
                  onfocus="console.log('focus')" onblur="console.log('blur')"
                  onchange="console.log('change')" countered="true" maxlength="20">
        <div slot="text">输入错误</div>
    </s-field-text>

    <s-field-text label="请多行输入框" style="margin: 16px;" multiLine="true" countered="true" maxlength="20"
                  value="嘻嘻嘻">
        <s-icon-button slot="start">
            <s-icon type="star"></s-icon>
        </s-icon-button>
        <s-icon-button slot="end">
            <s-icon type="star"></s-icon>
        </s-icon-button>
    </s-field-text>

    <br>

    <s-search>
        <svg style="width: 22px;height: 22px;" slot="start" stroke="currentColor" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
            <circle cx="20" cy="20" r="14" fill="none" stroke="currentColor" stroke-width="4" />
            <path d="M32 32 L40 40" stroke="currentColor" stroke-width="4" stroke-linecap="round" />
        </svg>
        <input type="text" placeholder="搜索关键字">
        <svg style="width: 22px;height: 22px;" slot="end" stroke="currentColor" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
            <path d="M12 12 L36 36" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
            <path d="M12 36 L36 12" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
        </svg>
    </s-search>

    <s-search>
        <svg style="width: 22px;height: 22px;" slot="start" stroke="currentColor" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
            <circle cx="20" cy="20" r="14" fill="none" stroke="currentColor" stroke-width="4" />
            <path d="M32 32 L40 40" stroke="currentColor" stroke-width="4" stroke-linecap="round" />
        </svg>
        <input type="text" placeholder="搜索关键字">
        <svg style="width: 22px;height: 22px;" slot="end" stroke="currentColor" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
            <path d="M12 12 L36 36" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
            <path d="M12 36 L36 12" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
        </svg>
        <div slot="dropdown">
            hello
        </div>
    </s-search>

    <hr>

    <s-app-bar>
        <!--左侧菜单按钮-->
        <s-icon-button slot="navigation">
            <s-icon type="menu"></s-icon>
        </s-icon-button>
        <!--标题-->
        <div slot="head">Title</div>
        <s-search slot="search" placeholder="搜索...">
            <svg style="width: 22px;height: 22px;" slot="start" stroke="currentColor" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
                <circle cx="20" cy="20" r="14" fill="none" stroke="currentColor" stroke-width="4" />
                <path d="M32 32 L40 40" stroke="currentColor" stroke-width="4" stroke-linecap="round" />
            </svg>
            <input type="text" placeholder="搜索关键字">
            <svg style="width: 22px;height: 22px;" slot="end" stroke="currentColor" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
                <path d="M12 12 L36 36" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
                <path d="M12 36 L36 12" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
            </svg>
        </s-search>

        <!--右侧操作按钮-->
        <s-icon-button slot="action">
            <s-icon type="search"></s-icon>
        </s-icon-button>
    </s-app-bar>

    <s-divider></s-divider>

    <s-app-bar>
        <!--左侧菜单按钮-->
        <s-icon-button slot="navigation">
            <s-icon type="menu"></s-icon>
        </s-icon-button>
        <svg viewBox="0 0 1167 1024" slot="logo">
            <path
                d="M716.8 1024l122.713043-512 81.808696-341.426087L962.226087 0h204.8l-40.904348 170.573913-81.808696 341.426087-122.991304 512z m-307.478261 0l-102.121739-426.573913-20.591304-85.426087L204.8 170.573913h204.521739l82.086957 341.426087 20.591304 85.453913L614.4 1024zM0 1024l122.991304-512 64.556522-270.191304 64.834783 270.191304 37.565217 156.382609L204.8 1024z m528.973913-497.808696l3.366957-14.191304h204.772173l-105.73913 440.486957z">
            </path>
        </svg>
        <!--标题-->
        <div slot="head">Title</div>
        <s-tooltip slot="menu-trigger">
            <s-icon-button slot="trigger">
                <s-icon>
                    <svg viewBox="0 -960 960 960">
                        <path
                            d="M240-400q-33 0-56.5-23.5T160-480q0-33 23.5-56.5T240-560q33 0 56.5 23.5T320-480q0 33-23.5 56.5T240-400Zm240 0q-33 0-56.5-23.5T400-480q0-33 23.5-56.5T480-560q33 0 56.5 23.5T560-480q0 33-23.5 56.5T480-400Zm240 0q-33 0-56.5-23.5T640-480q0-33 23.5-56.5T720-560q33 0 56.5 23.5T800-480q0 33-23.5 56.5T720-400Z">
                        </path>
                    </svg>
                </s-icon>
            </s-icon-button>
            更多
        </s-tooltip>
        <!--右侧操作按钮-->
        <s-icon-button slot="action">
            <s-icon type="search"></s-icon>
        </s-icon-button>
        <s-icon-button slot="action">
            <s-icon type="close"></s-icon>
        </s-icon-button>
    </s-app-bar>

    <s-divider></s-divider>

    <s-date></s-date>
    <s-carousel>
        <img src="https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel4.jpeg" onclick="console.log('???')">
        <img src="https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel3.jpeg">
        <img src="https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel2.jpeg">
    </s-carousel>

    <s-divider></s-divider>

    <s-skeleton></s-skeleton>

    <hr>

    <s-fold>
        <s-button slot="trigger">Folder</s-button>
        <div style="background: var(--s-color-);padding: 24px;">
            先帝创业未半而中道崩殂，今天下三分，益州疲弊，此诚危急存亡之秋也。然侍卫之臣不懈于内，忠志之士忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气，不宜妄自菲薄，引喻失义，以塞忠谏之路也。<br /><br />
            宫中府中，俱为一体，陟罚臧否，不宜异同。若有作奸犯科及为忠善者，宜付有司论其刑赏，以昭陛下平明之理，不宜偏私，使内外异法也。<br /><br />
            侍中、侍郎郭攸之、费祎、董允等，此皆良实，志虑忠纯，是以先帝简拔以遗陛下。愚以为宫中之事，事无大小，悉以咨之，然后施行，必能裨补阙漏，有所广益。<br /><br />
            将军向宠，性行淑均，晓畅军事，试用于昔日，先帝称之曰能，是以众议举宠为督。愚以为营中之事，悉以咨之，必能使行阵和睦，优劣得所。<br /><br />
            亲贤臣，远小人，此先汉所以兴隆也；亲小人，远贤臣，此后汉所以倾颓也。先帝在时，每与臣论此事，未尝不叹息痛恨于桓、灵也。侍中、尚书、长史、参军，此悉贞良死节之臣，愿陛下亲之信之，则汉室之隆，可计日而待也。<br /><br />
            臣本布衣，躬耕于南阳，苟全性命于乱世，不求闻达于诸侯。先帝不以臣卑鄙，猥自枉屈，三顾臣于草庐之中，咨臣以当世之事，由是感激，遂许先帝以驱驰。后值倾覆，受任于败军之际，奉命于危难之间，尔来二十有一年矣。<br /><br />
            先帝知臣谨慎，故临崩寄臣以大事也。受命以来，夙夜忧叹，恐托付不效，以伤先帝之明，故五月渡泸，深入不毛。今南方已定，兵甲已足，当奖率三军，北定中原，庶竭驽钝，攘除奸凶，兴复汉室，还于旧都。此臣所以报先帝而忠陛下之职分也。至于斟酌损益，进尽忠言，则攸之、祎、允之任也。<br /><br />
            愿陛下托臣以讨贼兴复之效，不效则治臣之罪以告先帝之灵。若无兴德之言则责攸之、祎、允等之慢以彰其咎陛下亦宜自谋以咨诹善道察纳雅言深追先帝遗诏臣不胜受恩感激。<br /><br />
            今当远离临表涕零不知所言。
        </div>
    </s-fold>

    <s-button onclick="document.querySelector('s-page').toggle('auto',this)"> auto</s-button>
    <s-button onclick="document.querySelector('s-page').toggle('dark',this)"> dark</s-button>
    <s-button onclick="document.querySelector('s-page').toggle('light',this)"> light</s-button>

    <div style="width: 240px;border: solid 1px #ddd">
        <s-menu>
            <div slot="label">控制台</div>
            <s-menu-item checked="true">
                <s-icon slot="start" type="home"></s-icon>
                首页
            </s-menu-item>
            <s-menu-item>
                <s-icon slot="start" type="search"></s-icon>
                用户
            </s-menu-item>
            <s-menu-item>
                <s-icon slot="start" type="light_mode"></s-icon>
                管理资源
            </s-menu-item>
            <s-menu-item onclick="console.log('click')">
                <s-icon slot="start" type="dark_mode"></s-icon>
                模式切换
                <s-menu slot="menu">
                    <s-menu-item>
                        <s-icon slot="start" type="home"></s-icon>
                        首页
                    </s-menu-item>
                    <s-menu-item>
                        <s-icon slot="start" type="search"></s-icon>
                        用户
                    </s-menu-item>
                    <s-menu-item>
                        <s-icon slot="start" type="light_mode"></s-icon>
                        管理资源
                    </s-menu-item>
                    <s-menu-item>
                        <s-icon slot="start" type="dark_mode"></s-icon>
                        模式切换
                    </s-menu-item>
                </s-menu>
            </s-menu-item>
            <s-menu-item>
                <s-icon slot="start" type="light_mode"></s-icon>
                管理资源
            </s-menu-item>
        </s-menu>
        <s-menu>
            <div slot="label">资源</div>
            <s-menu-item>
                <s-icon slot="start" type="star"></s-icon>
                我的收藏
            </s-menu-item>
            <s-menu-item>
                <s-icon slot="start" type="favorite"></s-icon>
                我喜欢
            </s-menu-item>
            <s-menu-item>
                <s-icon slot="start" type="menu"></s-icon>
                模块
            </s-menu-item>
            <s-menu-item>
                <s-icon slot="start" type="arrow_upward"></s-icon>
                上传
            </s-menu-item>
        </s-menu>
    </div>

    <div style="width: 240px;border: solid 1px #ddd">
        <s-menu>
            <div slot="label">控制台</div>
            <s-menu-item checked="true">
                首页
            </s-menu-item>
            <s-menu-item>
                用户
            </s-menu-item>
            <s-menu-item>
                管理资源
            </s-menu-item>
            <s-menu-item>
                模式切换
            </s-menu-item>
        </s-menu>
        <s-menu>
            <div slot="label">资源</div>
            <s-menu-item>
                我的收藏
            </s-menu-item>
            <s-menu-item>
                我喜欢
            </s-menu-item>
            <s-menu-item>
                模块
            </s-menu-item>
            <s-menu-item>
                上传
            </s-menu-item>
        </s-menu>
    </div>
    <s-button
        onclick="window.customElements.get('s-snackbar').show({text: `提示：${new Date().getMilliseconds()}`, duration: 0, action:{text:'确定'}})">
        <svg slot="start" viewBox="0 -960 960 960">
            <path
                d="M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z">
            </path>
        </svg>
        button
        <s-icon type="close" slot="end"></s-icon>
    </s-button>
    <s-button type="elevated" onclick="window.customElements.get('s-dialog').show('xxxxx')">
        <svg slot="start" viewBox="0 -960 960 960">
            <path
                d="M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z">
            </path>
        </svg>
        button
        <s-icon type="close" slot="end"></s-icon>
    </s-button>
    <s-button type="filled-tonal">
        <svg slot="start" viewBox="0 -960 960 960">
            <path
                d="M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z">
            </path>
        </svg>
        button
        <s-icon type="close" slot="end"></s-icon>
    </s-button>
    <s-button type="outlined">
        <svg slot="start" viewBox="0 -960 960 960">
            <path
                d="M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z">
            </path>
        </svg>
        button
        <s-icon type="close" slot="end"></s-icon>
    </s-button>
    <s-button type="text">
        <s-icon type="search" slot="start"></s-icon>
        button
        <s-icon type="close" slot="end"></s-icon>
    </s-button>
    <s-button disable="true"> button</s-button>
    <s-button type="elevated" disable="true"> button</s-button>
    <s-button type="filled-tonal" disable="true"> button</s-button>
    <s-button type="outlined" disable="true"> button</s-button>
    <s-button type="text" disable="true"> button</s-button>
    <hr>
    <s-checkbox>阅读用户协议</s-checkbox>

    <s-radio-button name="xx">阅读用户协议</s-radio-button>
    <s-radio-button name="xx">阅读用户协议</s-radio-button>
    <s-radio-button name="xx">阅读用户协议</s-radio-button>

    <hr>
    <s-icon></s-icon>
    <s-icon type="search"></s-icon>
    <s-icon type="menu"></s-icon>
    <s-icon type="arrow_back"></s-icon>
    <s-icon type="arrow_forward"></s-icon>
    <s-icon type="arrow_upward"></s-icon>
    <s-icon type="arrow_downward"></s-icon>
    <hr>
    <s-icon-button disable="true">
        <s-icon type="search"></s-icon>
    </s-icon-button>
    <s-icon-button type="filled" disable="true">
        <s-icon type="menu"></s-icon>
    </s-icon-button>
    <s-icon-button type="filled-tonal" disable="true">
        <s-icon type="close"></s-icon>
    </s-icon-button>
    <s-icon-button type="outlined" disable="true">
        <s-icon type="arrow_back"></s-icon>
    </s-icon-button>
    <hr>
    <s-drawer id="drawer" style="height: 500px;">
        <div slot="start">
            <s-picker onchange="console.log(this.selectedIndex)">
                <s-picker-item value="北京">
                    <s-icon slot="start" type="search"></s-icon>
                    北京
                </s-picker-item>
                <s-picker-item selected="true">上海</s-picker-item>
                <s-picker-item>成都</s-picker-item>
                <s-picker-item>贵阳</s-picker-item>
                <s-picker-item>西安</s-picker-item>
            </s-picker>
            <s-dialog positive="确认">
                <s-button slot="trigger">
                    Nesting
                </s-button>
                <div slot="headline">Dialog Choice</div>
                <div slot="text">
                    The M3 baseline color scheme uses the same roles and token mapping as user-generated color schemes.
                    <s-button onclick="this.parentNode.parentNode.size='full'">调整大小</s-button>
                    <s-button onclick="this.parentNode.parentNode.size='basic'">调整</s-button>
                </div>
                <s-button type="text" slot="action">取消</s-button>
                <s-button type="text" slot="action">确定</s-button>
            </s-dialog>
            <p>
                先帝创业未半而中道崩殂，今天下三分，益州疲弊，此诚危急存亡之秋也。然侍卫之臣不懈于内，忠志之士忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气，不宜妄自菲薄，引喻失义，以塞忠谏之路也。<br /><br />
                宫中府中，俱为一体，陟罚臧否，不宜异同。若有作奸犯科及为忠善者，宜付有司论其刑赏，以昭陛下平明之理，不宜偏私，使内外异法也。<br /><br />
                侍中、侍郎郭攸之、费祎、董允等，此皆良实，志虑忠纯，是以先帝简拔以遗陛下。愚以为宫中之事，事无大小，悉以咨之，然后施行，必能裨补阙漏，有所广益。<br /><br />
                将军向宠，性行淑均，晓畅军事，试用于昔日，先帝称之曰能，是以众议举宠为督。愚以为营中之事，悉以咨之，必能使行阵和睦，优劣得所。<br /><br />
                亲贤臣，远小人，此先汉所以兴隆也；亲小人，远贤臣，此后汉所以倾颓也。先帝在时，每与臣论此事，未尝不叹息痛恨于桓、灵也。侍中、尚书、长史、参军，此悉贞良死节之臣，愿陛下亲之信之，则汉室之隆，可计日而待也。<br /><br />
                臣本布衣，躬耕于南阳，苟全性命于乱世，不求闻达于诸侯。先帝不以臣卑鄙，猥自枉屈，三顾臣于草庐之中，咨臣以当世之事，由是感激，遂许先帝以驱驰。后值倾覆，受任于败军之际，奉命于危难之间，尔来二十有一年矣。<br /><br />
                先帝知臣谨慎，故临崩寄臣以大事也。受命以来，夙夜忧叹，恐托付不效，以伤先帝之明，故五月渡泸，深入不毛。今南方已定，兵甲已足，当奖率三军，北定中原，庶竭驽钝，攘除奸凶，兴复汉室，还于旧都。此臣所以报先帝而忠陛下之职分也。至于斟酌损益，进尽忠言，则攸之、祎、允之任也。<br /><br />
                愿陛下托臣以讨贼兴复之效，不效则治臣之罪以告先帝之灵。若无兴德之言则责攸之、祎、允等之慢以彰其咎陛下亦宜自谋以咨诹善道察纳雅言深追先帝遗诏臣不胜受恩感激。<br /><br />
                今当远离临表涕零不知所言。
            </p>
        </div>
        <div>
            <s-button onclick="document.querySelector('s-drawer').toggle()"> toggle start</s-button>
            <s-button onclick="document.querySelector('s-drawer').toggle('end')"> toggle end</s-button>

            <div>
          <pre style="overflow: auto;background: #ddd;">
            <code>
              &lt;s-icon style=&quot;color: #009688&quot;&gt;
              &lt;svg viewBox=&quot;0 -960 960 960&quot;&gt;
                &lt;path d=&quot;M620-520q25 0 42.5-17.5T680-580q0-25-17.5-42.5T620-640q-25 0-42.5 17.5T560-580q0 25 17.5 42.5T620-520Zm-280 0q25 0 42.5-17.5T400-580q0-25-17.5-42.5T340-640q-25 0-42.5 17.5T280-580q0 25 17.5 42.5T340-520Zm140 260q68 0 123.5-38.5T684-400H276q25 63 80.5 101.5T480-260Zm0 180q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-400Zm0 320q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Z&quot;&gt;&lt;/path&gt;
              &lt;/svg&gt;
            &lt;/s-icon&gt;
            </code>
          </pre>
            </div>

            将军向宠，性行淑均，晓畅军事，试用于昔日，先帝称之曰能，是以众议举宠为督。愚以为营中之事，悉以咨之，必能使行阵和睦，优劣得所。<br /><br />
            亲贤臣，远小人，此先汉所以兴隆也；亲小人，远贤臣，此后汉所以倾颓也。先帝在时，每与臣论此事，未尝不叹息痛恨于桓、灵也。侍中、尚书、长史、参军，此悉贞良死节之臣，愿陛下亲之信之，则汉室之隆，可计日而待也。<br /><br />
            臣本布衣，躬耕于南阳，苟全性命于乱世，不求闻达于诸侯。先帝不以臣卑鄙，猥自枉屈，三顾臣于草庐之中，咨臣以当世之事，由是感激，遂许先帝以驱驰。后值倾覆，受任于败军之际，奉命于危难之间，尔来二十有一年矣。<br /><br />
            先帝知臣谨慎，故临崩寄臣以大事也。受命以来，夙夜忧叹，恐托付不效，以伤先帝之明，故五月渡泸，深入不毛。今南方已定，兵甲已足，当奖率三军，北定中原，庶竭驽钝，攘除奸凶，兴复汉室，还于旧都。此臣所以报先帝而忠陛下之职分也。至于斟酌损益，进尽忠言，则攸之、祎、允之任也。<br /><br />
            愿陛下托臣以讨贼兴复之效，不效则治臣之罪以告先帝之灵。若无兴德之言则责攸之、祎、允等之慢以彰其咎陛下亦宜自谋以咨诹善道察纳雅言深追先帝遗诏臣不胜受恩感激。<br /><br />
            今当远离临表涕零不知所言。
        </div>
        <s-scroll-view slot="end" style="padding: 24px;">
            先帝创业未半而中道崩殂，今天下三分，益州疲弊，此诚危急存亡之秋也。然侍卫之臣不懈于内，忠志之士忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气，不宜妄自菲薄，引喻失义，以塞忠谏之路也。<br /><br />
            宫中府中，俱为一体，陟罚臧否，不宜异同。若有作奸犯科及为忠善者，宜付有司论其刑赏，以昭陛下平明之理，不宜偏私，使内外异法也。<br /><br />
            侍中、侍郎郭攸之、费祎、董允等，此皆良实，志虑忠纯，是以先帝简拔以遗陛下。愚以为宫中之事，事无大小，悉以咨之，然后施行，必能裨补阙漏，有所广益。<br /><br />
            将军向宠，性行淑均，晓畅军事，试用于昔日，先帝称之曰能，是以众议举宠为督。愚以为营中之事，悉以咨之，必能使行阵和睦，优劣得所。<br /><br />
            亲贤臣，远小人，此先汉所以兴隆也；亲小人，远贤臣，此后汉所以倾颓也。先帝在时，每与臣论此事，未尝不叹息痛恨于桓、灵也。侍中、尚书、长史、参军，此悉贞良死节之臣，愿陛下亲之信之，则汉室之隆，可计日而待也。<br /><br />
            臣本布衣，躬耕于南阳，苟全性命于乱世，不求闻达于诸侯。先帝不以臣卑鄙，猥自枉屈，三顾臣于草庐之中，咨臣以当世之事，由是感激，遂许先帝以驱驰。后值倾覆，受任于败军之际，奉命于危难之间，尔来二十有一年矣。<br /><br />
            先帝知臣谨慎，故临崩寄臣以大事也。受命以来，夙夜忧叹，恐托付不效，以伤先帝之明，故五月渡泸，深入不毛。今南方已定，兵甲已足，当奖率三军，北定中原，庶竭驽钝，攘除奸凶，兴复汉室，还于旧都。此臣所以报先帝而忠陛下之职分也。至于斟酌损益，进尽忠言，则攸之、祎、允之任也。<br /><br />
            愿陛下托臣以讨贼兴复之效，不效则治臣之罪以告先帝之灵。若无兴德之言则责攸之、祎、允等之慢以彰其咎陛下亦宜自谋以咨诹善道察纳雅言深追先帝遗诏臣不胜受恩感激。<br /><br />
            今当远离临表涕零不知所言。
        </s-scroll-view>
    </s-drawer>
    <hr>
    <button>Sheet xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</button>
    <s-bottom-sheet>
        <s-button slot="trigger">Sheet xxxxxxxxxxxxxxxxxxxxxx</s-button>
        <s-scroll-view style="height: 280px;">
            <div style="padding: 24px;">
                先帝创业未半而中道崩殂，今天下三分，益州疲弊，此诚危急存亡之秋也。然侍卫之臣不懈于内，忠志之士忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气，不宜妄自菲薄，引喻失义，以塞忠谏之路也。<br /><br />
                宫中府中，俱为一体，陟罚臧否，不宜异同。若有作奸犯科及为忠善者，宜付有司论其刑赏，以昭陛下平明之理，不宜偏私，使内外异法也。<br /><br />
                侍中、侍郎郭攸之、费祎、董允等，此皆良实，志虑忠纯，是以先帝简拔以遗陛下。愚以为宫中之事，事无大小，悉以咨之，然后施行，必能裨补阙漏，有所广益。<br /><br />
                将军向宠，性行淑均，晓畅军事，试用于昔日，先帝称之曰能，是以众议举宠为督。愚以为营中之事，悉以咨之，必能使行阵和睦，优劣得所。<br /><br />
                亲贤臣，远小人，此先汉所以兴隆也；亲小人，远贤臣，此后汉所以倾颓也。先帝在时，每与臣论此事，未尝不叹息痛恨于桓、灵也。侍中、尚书、长史、参军，此悉贞良死节之臣，愿陛下亲之信之，则汉室之隆，可计日而待也。<br /><br />
                臣本布衣，躬耕于南阳，苟全性命于乱世，不求闻达于诸侯。先帝不以臣卑鄙，猥自枉屈，三顾臣于草庐之中，咨臣以当世之事，由是感激，遂许先帝以驱驰。后值倾覆，受任于败军之际，奉命于危难之间，尔来二十有一年矣。<br /><br />
                先帝知臣谨慎，故临崩寄臣以大事也。受命以来，夙夜忧叹，恐托付不效，以伤先帝之明，故五月渡泸，深入不毛。今南方已定，兵甲已足，当奖率三军，北定中原，庶竭驽钝，攘除奸凶，兴复汉室，还于旧都。此臣所以报先帝而忠陛下之职分也。至于斟酌损益，进尽忠言，则攸之、祎、允之任也。<br /><br />
                愿陛下托臣以讨贼兴复之效，不效则治臣之罪以告先帝之灵。若无兴德之言则责攸之、祎、允等之慢以彰其咎陛下亦宜自谋以咨诹善道察纳雅言深追先帝遗诏臣不胜受恩感激。<br /><br />
                今当远离临表涕零不知所言。
            </div>
        </s-scroll-view>
    </s-bottom-sheet>
    <hr>
    <s-icon-button>
        <svg viewBox="0 -960 960 960">
            <path
                d="M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z">
            </path>
        </svg>
        <s-badge slot="badge"></s-badge>
    </s-icon-button>
    <s-icon-button type="filled">
        <svg viewBox="0 -960 960 960">
            <path
                d="M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z">
            </path>
        </svg>
        <s-badge slot="badge"></s-badge>
    </s-icon-button>
    <s-icon-button type="filled-tonal">
        <svg viewBox="0 -960 960 960">
            <path
                d="M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z">
            </path>
        </svg>
        <s-badge slot="badge">2</s-badge>
    </s-icon-button>
    <s-icon-button type="outlined">
        <svg viewBox="0 -960 960 960">
            <path
                d="M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z">
            </path>
        </svg>
        <s-badge slot="badge">99</s-badge>
    </s-icon-button>
    <s-icon-button disable="true">
        <svg viewBox="0 -960 960 960">
            <path
                d="M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z">
            </path>
        </svg>
    </s-icon-button>
    <s-icon-button type="filled" disable="true">
        <s-icon type="add"></s-icon>
    </s-icon-button>
    <s-icon-button type="filled-tonal" disable="true">
        <svg viewBox="0 -960 960 960">
            <path
                d="M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z">
            </path>
        </svg>
    </s-icon-button>
    <s-icon-button type="outlined" disable="true">
        <s-icon type="add"></s-icon>
    </s-icon-button>
    <hr>
    <s-fab size="small">
        <s-icon type="search"></s-icon>
    </s-fab>
    <s-fab>
        <s-icon type="search"></s-icon>
    </s-fab>
    <s-fab size="large">
        <s-icon type="search"></s-icon>
    </s-fab>
    <s-fab extended="true" size="small">
        <s-icon slot="start" type="add"></s-icon>
        compose
    </s-fab>
    <hr>
    <s-segmented-button onchange="console.log(this.selectedIndex)">
        <s-segmented-button-item selectable="false">
            <s-icon type="chevron_left"></s-icon>
        </s-segmented-button-item>
        <s-segmented-button-item selected="true">1</s-segmented-button-item>
        <s-segmented-button-item>2</s-segmented-button-item>
        <s-segmented-button-item>3</s-segmented-button-item>
        <s-segmented-button-item>...</s-segmented-button-item>
        <s-segmented-button-item>16</s-segmented-button-item>
        <s-segmented-button-item selectable="false">
            <s-icon type="chevron_right"></s-icon>
        </s-segmented-button-item>
    </s-segmented-button>
    <hr>
    <s-ripple style="color: #009688;padding: 24px;">
        Test
    </s-ripple>
    <div style="position: relative;">
        <button onclick="console.log('button')">
            ripple
        </button>
        <s-ripple attached="true"></s-ripple>
    </div>
    <hr>
    <s-checkbox></s-checkbox>
    <s-checkbox indeterminate="true"></s-checkbox>
    <s-checkbox disable="true"></s-checkbox>
    <s-checkbox disable="true" checked="true"></s-checkbox>
    <s-checkbox disable="true" indeterminate="true"></s-checkbox>
    <s-checkbox style="color: #009688;"></s-checkbox>
    <s-checkbox style="color: #009688;" indeterminate="true"></s-checkbox>
    <s-checkbox style="color: #009688;" disable="true"></s-checkbox>
    <s-checkbox style="color: #009688;" disable="true" checked="true"></s-checkbox>
    <s-checkbox style="color: #009688;" disable="true" indeterminate="true"></s-checkbox>
    <hr>
    <s-radio-button name="test"></s-radio-button>
    <s-radio-button name="test">Selected</s-radio-button>
    <s-radio-button disable="true"></s-radio-button>
    <s-radio-button checked="true" disable="true">Select Group</s-radio-button>
    <s-radio-button name="test" style="color: #009688;"></s-radio-button>
    <s-radio-button name="test" style="color: #009688;"></s-radio-button>
    <s-radio-button disable="true" style="color: #009688;"></s-radio-button>
    <s-radio-button checked="true" disable="true">Select Group</s-radio-button>
    <s-radio-button name="test" style="color: #009688;width: 64px;height: 64px;"></s-radio-button>
    <hr>

    <s-slider labeled="true"></s-slider>
    <s-slider value="0" oninput="document.querySelector('#progress').value=this.value"></s-slider>
    <s-slider disable="true" value="50"></s-slider>
    <s-slider ranged="true"></s-slider>
    <hr>
    <s-linear-progress value="20"></s-linear-progress>
    <s-linear-progress style="color: #009688" value="50"></s-linear-progress>
    <s-linear-progress indeterminate="true"></s-linear-progress>

    <hr>

    <s-circular-progress id="progress" style="color: #009688" animated="true"></s-circular-progress>
    <s-circular-progress style="color: #8d711b" indeterminate="true"></s-circular-progress>
    <hr>
    <s-switch></s-switch>
    <s-switch checked="true"></s-switch>
    <s-switch disable="true"></s-switch>
    <s-switch disable="true" checked="true"></s-switch>
    <hr>
    <s-popup-menu>
        <s-button slot="trigger">菜单</s-button>
        <s-popup-menu-item>
            <svg viewBox="0 -960 960 960" slot="start">
                <path
                    d="M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z">
                </path>
            </svg>
            播放
        </s-popup-menu-item>
        <s-popup-menu-item>
            <s-icon slot="start" type="close"></s-icon>
            播放单曲
        </s-popup-menu-item>
        <s-popup-menu-item>我喜欢</s-popup-menu-item>
        <s-popup-menu group="start">
            <s-popup-menu-item slot="trigger">
                添加到
                <s-icon slot="end" type="arrow_drop_right"></s-icon>
            </s-popup-menu-item>
            <s-popup-menu-item>试听列表</s-popup-menu-item>
            <s-popup-menu-item>添加到新歌单</s-popup-menu-item>
        </s-popup-menu>
        <s-popup-menu group="end">
            <s-popup-menu-item slot="trigger">
                更换音质
                <s-icon slot="end" type="arrow_drop_right"></s-icon>
            </s-popup-menu-item>
            <s-popup-menu-item>标准品质</s-popup-menu-item>
            <s-popup-menu-item>HQ高品质</s-popup-menu-item>
            <s-popup-menu-item>SQ无损品质</s-popup-menu-item>
        </s-popup-menu>
        <s-popup-menu-item>查看评论(520)</s-popup-menu-item>
        <s-popup-menu>
            <s-popup-menu-item slot="trigger">
                删除
                <s-icon slot="end" type="arrow_drop_right"></s-icon>
            </s-popup-menu-item>
            <s-popup-menu-item>删除</s-popup-menu-item>
            <s-popup-menu-item>删除(包括文件)</s-popup-menu-item>
        </s-popup-menu>
        <s-popup-menu>
            <s-popup-menu-item slot="trigger">
                更多操作
                <s-icon slot="end" type="arrow_drop_right"></s-icon>
            </s-popup-menu-item>
            <s-popup-menu-item>复制歌曲信息</s-popup-menu-item>
            <s-popup-menu-item>查看文件信息</s-popup-menu-item>
            <s-popup-menu-item>取消匹配歌曲</s-popup-menu-item>
        </s-popup-menu>
    </s-popup-menu>
    <hr>
    <s-picker onchange="console.log(this.selectedIndex)" style="--padding: 24px;--border-radius: 16px">
        <s-picker-item selected="true">北京</s-picker-item>
        <s-picker-item>上海</s-picker-item>
        <s-picker-item>成都</s-picker-item>
        <s-picker-item>贵阳</s-picker-item>
        <s-picker-item>西安</s-picker-item>
        <s-picker-item>上海</s-picker-item>
        <s-picker-item>成都</s-picker-item>
        <s-picker-item>贵阳</s-picker-item>
        <s-picker-item>西安</s-picker-item>
        <s-picker-item>上海</s-picker-item>
        <s-picker-item>成都</s-picker-item>
        <s-picker-item>贵阳</s-picker-item>
        <s-picker-item>西安</s-picker-item>
        <s-picker-item>上海</s-picker-item>
        <s-picker-item>成都</s-picker-item>
        <s-picker-item>贵阳</s-picker-item>
        <s-picker-item>西安</s-picker-item>
    </s-picker>
    <s-picker label="请选择地区" onchange="console.log(this.selectedIndex)">
        <s-picker-item>北京</s-picker-item>
        <s-picker-item value="上海">
            <s-icon slot="start" type="home"></s-icon>
            上海
            <s-icon slot="end" type="close"></s-icon>
        </s-picker-item>
        <s-picker-item>成都</s-picker-item>
        <s-picker-item>贵阳</s-picker-item>
        <s-picker-item>西安</s-picker-item>
    </s-picker>
    <s-picker onchange="console.log(this.selectedIndex)">
        <s-button slot="trigger">选择</s-button>
        <s-picker-item value="北京">
            <s-icon slot="start" type="search"></s-icon>
            北京
        </s-picker-item>
        <s-picker-item>上海</s-picker-item>
        <s-picker-item>成都</s-picker-item>
        <s-picker-item>贵阳</s-picker-item>
        <s-picker-item>西安</s-picker-item>
    </s-picker>
    <hr>
    <s-rate></s-rate>
    <s-rate readonly="true"></s-rate>
    <hr>
    <s-card clickable="true">
        <div slot="image"></div>
        <div slot="headline">Healine</div>
        <div slot="subhead">Subhead</div>
        <div slot="text">Card containers hold all card elements. Their size is determined by the space those</div>
        <s-button slot="action" type="filled-tonal">Action</s-button>
        <s-button slot="action">Action</s-button>
    </s-card>
    <s-card type="filled" clickable="true">
        <div slot="image"></div>
        <div slot="headline">Healine</div>
        <div slot="subhead">Subhead</div>
        <div slot="text">Card containers hold all card elements. Their size is determined by the space those</div>
        <s-button slot="action" type="outlined">Action</s-button>
        <s-button slot="action">Action</s-button>
    </s-card>
    <s-card type="outlined" clickable="true">
        <div slot="image"></div>
        <div slot="headline">Healine</div>
        <div slot="subhead">Subhead</div>
        <div slot="text">Card containers hold all card elements. Their size is determined by the space those</div>
        <s-button slot="action" type="filled-tonal" onpointerdown="event.stopPropagation()"
                  onclick="console.log('sss')">Action
        </s-button>
        <s-button slot="action">Action</s-button>
    </s-card>
    <hr>
    <s-tooltip>
        <s-button slot="trigger">Tooltip</s-button>
        提示信息
    </s-tooltip>

    <hr>
    <s-chip clickable="true">
        a
        <s-icon-button slot="action">
            <s-icon type="close"></s-icon>
        </s-icon-button>
    </s-chip>
    <s-chip type="elevated">
        Assist 2
        <s-icon-button slot="action">
            <s-icon type="close"></s-icon>
        </s-icon-button>
    </s-chip>
    <s-chip type="filled-tonal" clickable="true">
        Assist 2
        <s-icon-button slot="action">
            <s-icon type="close"></s-icon>
        </s-icon-button>
    </s-chip>
    <hr>
    <s-dialog negative="取消" positive="确认" onscroll="console.log('??')">
        <button slot="trigger">
            Base
        </button>
        <div slot="headline">出师表</div>
        <div slot="text">
            <s-picker onchange="console.log(this.selectedIndex)">
                <s-picker-item value="北京">
                    <s-icon slot="start" type="search"></s-icon>
                    北京
                </s-picker-item>
                <s-picker-item selected="true">上海</s-picker-item>
                <s-picker-item>成都</s-picker-item>
                <s-picker-item>贵阳</s-picker-item>
                <s-picker-item>西安</s-picker-item>
            </s-picker>
            <s-tooltip>
                <p slot="trigger">松手</p>
                松手啊
            </s-tooltip>
            先帝创业未半而中道崩殂，今天下三分，益州疲弊，此诚危急存亡之秋也。然侍卫之臣不懈于内，忠志之士忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气，不宜妄自菲薄，引喻失义，以塞忠谏之路也。<br /><br />
            宫中府中，俱为一体，陟罚臧否，不宜异同。若有作奸犯科及为忠善者，宜付有司论其刑赏，以昭陛下平明之理，不宜偏私，使内外异法也。<br /><br />
            侍中、侍郎郭攸之、费祎、董允等，此皆良实，志虑忠纯，是以先帝简拔以遗陛下。愚以为宫中之事，事无大小，悉以咨之，然后施行，必能裨补阙漏，有所广益。<br /><br />
            将军向宠，性行淑均，晓畅军事，试用于昔日，先帝称之曰能，是以众议举宠为督。愚以为营中之事，悉以咨之，必能使行阵和睦，优劣得所。<br /><br />
            亲贤臣，远小人，此先汉所以兴隆也；亲小人，远贤臣，此后汉所以倾颓也。先帝在时，每与臣论此事，未尝不叹息痛恨于桓、灵也。侍中、尚书、长史、参军，此悉贞良死节之臣，愿陛下亲之信之，则汉室之隆，可计日而待也。<br /><br />
            臣本布衣，躬耕于南阳，苟全性命于乱世，不求闻达于诸侯。先帝不以臣卑鄙，猥自枉屈，三顾臣于草庐之中，咨臣以当世之事，由是感激，遂许先帝以驱驰。后值倾覆，受任于败军之际，奉命于危难之间，尔来二十有一年矣。<br /><br />
            先帝知臣谨慎，故临崩寄臣以大事也。受命以来，夙夜忧叹，恐托付不效，以伤先帝之明，故五月渡泸，深入不毛。今南方已定，兵甲已足，当奖率三军，北定中原，庶竭驽钝，攘除奸凶，兴复汉室，还于旧都。此臣所以报先帝而忠陛下之职分也。至于斟酌损益，进尽忠言，则攸之、祎、允之任也。<br /><br />
            愿陛下托臣以讨贼兴复之效，不效则治臣之罪以告先帝之灵。若无兴德之言则责攸之、祎、允等之慢以彰其咎陛下亦宜自谋以咨诹善道察纳雅言深追先帝遗诏臣不胜受恩感激。<br /><br />
            今当远离临表涕零不知所言。
            臣本布衣，躬耕于南阳，苟全性命于乱世，不求闻达于诸侯。先帝不以臣卑鄙，猥自枉屈，三顾臣于草庐之中，咨臣以当世之事，由是感激，遂许先帝以驱驰。后值倾覆，受任于败军之际，奉命于危难之间，尔来二十有一年矣。<br /><br />
            先帝知臣谨慎，故临崩寄臣以大事也。受命以来，夙夜忧叹，恐托付不效，以伤先帝之明，故五月渡泸，深入不毛。今南方已定，兵甲已足，当奖率三军，北定中原，庶竭驽钝，攘除奸凶，兴复汉室，还于旧都。此臣所以报先帝而忠陛下之职分也。至于斟酌损益，进尽忠言，则攸之、祎、允之任也。<br /><br />
            愿陛下托臣以讨贼兴复之效，不效则治臣之罪以告先帝之灵。若无兴德之言则责攸之、祎、允等之慢以彰其咎陛下亦宜自谋以咨诹善道察纳雅言深追先帝遗诏臣不胜受恩感激。<br /><br />
            今当远离临表涕零不知所言。
        </div>
        <s-button type="text" slot="action">取消</s-button>
        <s-button type="text" slot="action">确定</s-button>
    </s-dialog>

    <s-dialog positive="确认">
        <s-button slot="trigger">
            Nesting
        </s-button>
        <div slot="headline">Dialog Choice</div>
        <div slot="text">
            The M3 baseline color scheme uses the same roles and token mapping as user-generated color schemes.
            <s-button onclick="this.parentNode.parentNode.size='full'">调整大小</s-button>
            <s-button onclick="this.parentNode.parentNode.size='basic'">调整</s-button>
        </div>
        <s-button type="text" slot="action">取消</s-button>
        <s-button type="text" slot="action">确定</s-button>
    </s-dialog>
    <hr>

    <s-rate></s-rate>

    <hr>

    <hr>
    <s-popup>
        <s-button slot="trigger">popup</s-button>
        <div style="min-height: 280px;">test popup</div>
    </s-popup>

    <hr>
    <s-tab>
        <s-tab-item>
            <div slot="text">Item 1</div>
        </s-tab-item>
        <s-tab-item>
            <div slot="text">Item 2</div>
        </s-tab-item>
        <s-tab-item>
            <div slot="text">Item 3</div>
        </s-tab-item>
        <s-tab-item>
            <div slot="text">Item 3</div>
        </s-tab-item>
        <s-tab-item>
            <div slot="text">Item 3</div>
        </s-tab-item>
        <s-tab-item>
            <div slot="text">Item 3</div>
        </s-tab-item>
        <s-tab-item selected="true">
            <div slot="text">Item 31</div>
        </s-tab-item>
        <s-tab-item>
            <div slot="text">Item 3</div>
        </s-tab-item>
        <s-tab-item>
            <div slot="text">Item 3</div>
        </s-tab-item>
        <s-tab-item>
            <div slot="text">Item 3</div>
        </s-tab-item>
        <s-tab-item>
            <div slot="text">Item 3</div>
        </s-tab-item>
        <s-tab-item>
            <div slot="text">Item 3</div>
        </s-tab-item>
    </s-tab>
    <s-tab>
        <s-tab-item>
            <div slot="text">Item 1</div>
            <s-badge slot="badge"></s-badge>
        </s-tab-item>
        <s-tab-item selected="true">
            <div slot="text">Item 2</div>
        </s-tab-item>
        <s-tab-item>
            <div slot="text">Item 3</div>
            <s-badge slot="badge">99</s-badge>
        </s-tab-item>
    </s-tab>
    <s-tab>
        <s-tab-item>
            <s-icon type="home" slot="icon"></s-icon>
            <div slot="text">Item 1</div>
            <s-badge slot="badge"></s-badge>
        </s-tab-item>
        <s-tab-item selected="true">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" slot="icon">
                <path
                    d="M440-280h80v-160h160v-80H520v-160h-80v160H280v80h160v160Zm40 200q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z">
                </path>
            </svg>
            <div slot="text">Item 2</div>
        </s-tab-item>
        <s-tab-item>
            <div slot="text">Item 3</div>
            <s-icon type="home" slot="icon"></s-icon>
            <s-badge slot="badge">99</s-badge>
        </s-tab-item>
    </s-tab>
    <hr>
    <s-tab>
        <s-tab-item>
            <s-icon type="home" slot="icon"></s-icon>
            <s-badge slot="badge"></s-badge>
        </s-tab-item>
        <s-tab-item selected="true">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" slot="icon">
                <path
                    d="M440-280h80v-160h160v-80H520v-160h-80v160H280v80h160v160Zm40 200q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z">
                </path>
            </svg>
        </s-tab-item>
        <s-tab-item>
            <s-icon type="home" slot="icon"></s-icon>
            <s-badge slot="badge">99</s-badge>
        </s-tab-item>
    </s-tab>
    <hr>
    <s-navigation>
        <s-navigation-item selected="true">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" slot="icon">
                <path
                    d="m422-232 207-248H469l29-227-185 267h139l-30 208ZM320-80l40-280H160l360-520h80l-40 320h240L400-80h-80Zm151-390Z">
                </path>
            </svg>
            <div slot="text">Item 1</div>
            <s-badge slot="badge"></s-badge>
        </s-navigation-item>
        <s-navigation-item>
            <s-icon type="search" slot="icon"></s-icon>
            <div slot="text">Item 2</div>
        </s-navigation-item>
        <s-navigation-item>
            <s-icon type="dark_mode" slot="icon"></s-icon>
            <div slot="text">Item 3</div>
            <s-badge slot="badge">99</s-badge>
        </s-navigation-item>
    </s-navigation>
    <s-navigation mode="rail">
        <s-navigation-item selected="true">
            <s-icon type="add" slot="icon"></s-icon>
            <div slot="text">Item 1</div>
            <s-badge slot="badge"></s-badge>
        </s-navigation-item>
        <s-navigation-item>
            <s-icon type="search" slot="icon"></s-icon>
            <div slot="text">Item 2</div>
        </s-navigation-item>
        <s-navigation-item>
            <s-icon type="home" slot="icon"></s-icon>
            <div slot="text">Item 3</div>
            <s-badge slot="badge">99</s-badge>
        </s-navigation-item>
    </s-navigation>
    <hr>
    <s-popup>
        <s-button slot="trigger"> popup</s-button>
        <div style="min-height: 280px">
            下拉框
        </div>
    </s-popup>
    <hr>
    <s-popup-menu>
        <s-button slot="trigger">菜单</s-button>
        <s-popup-menu-item>选项1</s-popup-menu-item>
        <s-popup-menu-item>选项2</s-popup-menu-item>
        <s-popup-menu-item>选项3</s-popup-menu-item>
        <s-popup-menu-item>选项4</s-popup-menu-item>
        <s-popup-menu-item>选项5</s-popup-menu-item>
    </s-popup-menu>
    <hr>
    <s-snackbar duration="0">
        <s-button slot="trigger"> Snackbar 1</s-button>
        <s-icon type="add" slot="icon"></s-icon>
        Snackbar Message 1
        <s-button type="text" slot="action"> 关闭</s-button>
    </s-snackbar>

    <s-snackbar duration="0" type="warning">
        <s-button slot="trigger"> Snackbar 2</s-button>
        Snackbar Message 2
        <s-button type="text" slot="action"> 关闭</s-button>
    </s-snackbar>

    <s-snackbar duration="0" type="error">
        <s-button slot="trigger"> Snackbar 3</s-button>
        Snackbar Message 3
        <s-button type="text" slot="action"> 关闭</s-button>
    </s-snackbar>

    <s-button
        onclick="window.customElements.get('s-snackbar').show({text: `提示：${new Date}`, duration:Math.max( Math.random()*10000, 4000)})">Snackbar2
    </s-button>
    <hr>
    <s-tooltip>
        <s-button slot="trigger">Tooltip</s-button>
        提示信息
    </s-tooltip>
    <hr>
    <s-table>
        <s-thead>
            <s-tr>
                <s-th>title1</s-th>
                <s-th>title2</s-th>
                <s-th>title3</s-th>
                <s-th>title4</s-th>
                <s-th>title5</s-th>
            </s-tr>
        </s-thead>
        <s-tbody>
            <s-tr>
                <s-td>item1</s-td>
                <s-td>item2</s-td>
                <s-td>item3</s-td>
                <s-td>item4</s-td>
                <s-td>item5</s-td>
            </s-tr>
            <s-tr>
                <s-td>item1</s-td>
                <s-td>item2</s-td>
                <s-td>item3</s-td>
                <s-td>item4</s-td>
                <s-td>item5</s-td>
            </s-tr>
            <s-tr>
                <s-td>item1</s-td>
                <s-td>item2</s-td>
                <s-td>item3</s-td>
                <s-td>item4</s-td>
                <s-td>item5</s-td>
            </s-tr>
            <s-tr>
                <s-td>item1</s-td>
                <s-td>item2</s-td>
                <s-td>item3</s-td>
                <s-td>item4</s-td>
                <s-td>item5</s-td>
            </s-tr>
            <s-tr>
                <s-td>item1</s-td>
                <s-td>item2</s-td>
                <s-td>item3</s-td>
                <s-td>item4</s-td>
                <s-td>item5</s-td>
            </s-tr>
            <s-tr>
                <s-td>item1</s-td>
                <s-td>item2</s-td>
                <s-td>item3</s-td>
                <s-td>item4</s-td>
                <s-td>item5</s-td>
            </s-tr>
        </s-tbody>
    </s-table>
</s-page>

<script type="module" src="../dist/main.js"></script>
<!--<script type="module" src="../dist/sober.min.js"></script>-->
<script type="module" src="./scripts/default.js"></script>
<script>

</script>
</body>

</html>
